<template>
  <div>
    <el-card class="box-card">
      <el-form inline>
        <el-form-item label="一级分类">
          <el-select
            :disabled="isDisabled"
            v-model="categoryStore.chooseCategory[0]"
            class="m-2"
            placeholder="请选择分类"
            size="large"
            @change="
              categoryStore.getAttrList(2, categoryStore.chooseCategory[0])
            "
          >
            <el-option
              v-for="item in categoryStore.categoryList[0]"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select
            :disabled="isDisabled"
            v-model="categoryStore.chooseCategory[1]"
            class="m-2"
            placeholder="请选择分类"
            size="large"
            @change="
              categoryStore.getAttrList(3, categoryStore.chooseCategory[1])
            "
          >
            <el-option
              v-for="item in categoryStore.categoryList[1]"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select
            :disabled="isDisabled"
            v-model="categoryStore.chooseCategory[2]"
            class="m-2"
            placeholder="请选择分类"
            size="large"
          >
            <el-option
              v-for="item in categoryStore.categoryList[2]"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import useCategoryStore from "@/store/modules/category";
defineProps(["isDisabled"]);
let categoryStore = useCategoryStore();

//获取属性数据
onMounted(() => {
  categoryStore.getAttrList();
});
</script>

<style scoped lang="scss">
.el-form-item {
  align-items: center;
}
</style>
